<template>
  <el-dialog
    title="下一部剧推荐"
    :visible="show"
    width="30%"
    @close="close"
  >
    <div class="content">
      <el-form
        ref="form"
        label-position="top"
        :rules="rules"
        :model="formData"
        label-width="120px"
      >
        <!-- prop="config_id"  -->
        <el-form-item
          label="推荐规则"
          class="nextVideo"
        >
          <el-select
            v-model="formData.config_id"
            clearable
            placeholder="请选择"
            style="width: 100%;"
          >
            <el-option
              v-for="item in optionsList.recommend_config"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="contentInfo">
        <p class="red text">本剧播完后,可按指定的推荐规则继续播放短剧</p>
        <p class="text">如不设置，则按用户所在小程序栏位管理下排行短剧显示</p>
      </div>
    </div>
    <span slot="footer">
      <el-button @click="close">取 消</el-button>
      <el-button
        :loading="loading"
        type="primary"
        @click="submit"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { commonData } from '@/api/common'
import { sysPlayletSetRecommendConfig } from '@/api/content'
export default {
  props: ['show', 'info'],
  data() {
    return {
      formData: {
        config_id: ''
      },
      loading: false,
      rules: {
        config_id: [{ required: true, message: '请选择推荐规则', trigger: 'blur' }]
      },
      optionsList: {
        recommend_config: []
      }
    }
  },
  watch: {
    show(newVal, oldVal) {
      if (newVal) {
        console.log(newVal, '----------')
        this.free_coin = this.info.free_coin
        if (this.info.recommend_config_id * 1) {
          this.formData.config_id = this.info.recommend_config_id
        } else {
          this.formData.config_id = ''
        }
        this.onGetRecommend()
      }
    }
  },
  mounted() {
    if (this.info.recommend_config_id * 1) {
      this.formData.config_id = this.info.recommend_config_id
    } else {
      this.formData.config_id = ''
    }
  },
  methods: {
    async onGetRecommend() {
      const res = await commonData({ type: 'recommend_config' })
      if (res.status_code === 1) {
        this.optionsList.recommend_config = res.data.data
      }
    },
    close() {
      this.$emit('update:show', false)
    },
    nextVideoSelect(value) {
      this.formData.config_id = value
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          this.setNextVideo()
        } else {
          return false
        }
      })
    },
    setNextVideo() {
      const data = {
        id: this.info.id,
        config_id: this.formData.config_id
      }
      sysPlayletSetRecommendConfig(data).then(
        (res) => {
          this.loading = false
          if (res.status_code === 1) {
            this.close()
            this.$emit('ok')
            this.$message.success(res.msg)
          }
        },
        (errr) => {
          this.loading = false
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.contentInfo {
  .red {
    color: rgb(247, 95, 97);
  }
}
.nextVideo {
  ::v-deep.el-form-item__label {
    font-weight: bold !important;
    font-size: 14px;
  }
}
</style>